<template>
    <div>
        <div class="mx-4 my-8 text-2xl">教学案例管理</div>
        <div class="m-4">
            <avue-crud
                ref="crudRef"
                :option="option"
                :data="data"
                v-model:page="page"
                @row-save="rowSave"
                @row-update="rowUpdate"
                @row-del="rowDel"
                @search-change="searchChange"
                @search-reset="resetChange"
                @refresh-change="refreshChange"
                @size-change="sizeChange"
                @current-change="currentChange"
            >
                <template #menu-left>
                    <el-button
                        type="primary"
                        :icon="Plus"
                        @click="router.push(`/admin/teach-case/edit/add`)"
                        >新增</el-button
                    >
                </template>
                <template #menu-before="{ row }">
                    <el-button
                        type="primary"
                        link
                        :icon="Edit"
                        @click="router.push(`/admin/teach-case/edit/${row.id}`)"
                    >
                        编辑
                    </el-button>
                </template>
            </avue-crud>
        </div>
    </div>
</template>

<script setup lang="ts">
import { DBKeys, add, del, getList, update } from '@/apis/commonCrud'
import { Edit, Plus } from '@element-plus/icons-vue'
import type { AvueCrudOption } from '@smallwei/avue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { teachCaseColumn } from './column'

const router = useRouter()

const page = ref({
    total: 10,
    currentPage: 1,
    pageSize: 10,
})
const option = ref<AvueCrudOption>({
    index: true,
    editBtn: false,
    addBtn: false,
    column: teachCaseColumn,
})
const data = ref([])
const searchParams = ref({
    page: 1,
    pageSize: 10,
})

const dbName: DBKeys = 'teachCases'

const getData = async (sParams = searchParams.value) => {
    const res = await getList(dbName, {
        ...sParams,
        attributes: {
            exclude: ['doc', 'description']
        }
    }, [
        { model: 'users', attributes: ['id', 'nickname'], as: 'user' },
        { model: 'knowledgeBases', attributes: ['id', 'title'], as: 'knowledgeBase' },
    ])
    if (!res.success) {
        ElMessage.error('获取数据失败')
        return
    }
    data.value = res.data.rows
    page.value.total = res.data.count
}

getData()

const rowSave = async (form, done, loading) => {
    const res = await add(dbName, form)
    loading()
    if (!res.success) {
        ElMessage.error('添加失败')
        return
    }
    ElMessage.success('添加成功')
    await getData()
    done()
}

const rowDel = async (row, _index, done) => {
    const confirm = await ElMessageBox.confirm('确定要删除吗？')

    if (confirm !== 'confirm') {
        done()
        return
    }

    const res = await del(dbName, row.id)
    if (!res.success) {
        ElMessage.error('删除失败')
        return
    }
    ElMessage.success('删除成功')
    await getData()
    done()
}

const rowUpdate = async (form, _index, done, loading) => {
    const res = await update(dbName, form.id, {
        title: form.title,
        content: form.content,
    })
    if (!res.success) {
        ElMessage.error('修改失败')
        return
    }
    loading()
    ElMessage.success('修改成功')
    await getData()
    done()
}

const resetChange = () => {
    const newSearchParams = {
        page: 1,
        pageSize: page.value.pageSize,
    }
    searchParams.value = newSearchParams
}

const searchChange = async (params, done) => {
    const newSearchParams = {
        page: 1,
        pageSize: page.value.pageSize,
        ...params,
    }
    searchParams.value = newSearchParams
    await getData(newSearchParams)
    done()
}
const refreshChange = () => {
    getData()
}

const sizeChange = (val) => {
    page.value.pageSize = val
    const newSearchParams = {
        page: 1,
        pageSize: val,
    }
    searchParams.value = newSearchParams
    getData(newSearchParams)
}

const currentChange = (val) => {
    page.value.currentPage = val
    const newSearchParams = {
        ...searchParams.value,
        page: val,
        pageSize: page.value.pageSize,
    }
    searchParams.value = newSearchParams
    getData(newSearchParams)
}
</script>

<style scoped></style>
